<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" >
            <div class="layui-form-item">
                <label for="" class="layui-form-label">路由名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入路由名称，如：联通" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">出局号码：</label>
                <div class="layui-input-inline">
                    <input type="text" name="outcid" placeholder="请输入出局号码" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="checkbox" lay-filter="outcid_mode" title="是否覆盖分机" lay-skin="primary">
                    <input type="hidden" name="outcid_mode" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">优先级</label>
                <div class="layui-input-inline">
                    <input type="number" name="seq" placeholder="请输入优先级0-10" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">可留空</div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">拨号规则</label>
                <div class="layui-form-mid">
                    <button type="button" id="addReg" class="layui-btn layui-btn-sm" style="cursor: pointer"><i class="layui-icon layui-icon-add-1"></i>添加</button>
                </div>
                <div id="regBox" class="layui-input-block layui-clear" style="width: 600px">
                    <div class="layui-clear" style="margin-bottom:5px">
                        <div class="layui-form-mid">(</div>
                        <div class="layui-input-inline" style="width: 100px">
                            <input type="text" placeholder="prepend" class="layui-input">
                        </div>
                        <div class="layui-form-mid">) +</div>
                        <div class="layui-input-inline" style="width: 100px">
                            <input type="text" placeholder="prefix" class="layui-input">
                        </div>
                        <div class="layui-form-mid">| [</div>
                        <div class="layui-input-inline" style="width: 100px">
                            <input type="text" placeholder="match pattern" class="layui-input">
                        </div>
                        <div class="layui-form-mid">/</div>
                        <div class="layui-input-inline" style="width: 100px">
                            <input type="text" placeholder="CallerID" class="layui-input">
                        </div>
                        <div class="layui-form-mid">]</div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">中继信息</label>
                <div class="layui-form-mid layui-word-aux">0-2代表优先级</div>
                <div class="layui-input-block">
                    <div class="layui-clear">
                        <div class="layui-form-mid">0</div>
                        <div class="layui-inline">
                            <select name="trunkid[0]" lay-verify="required">
                                <option></option>
                                <?php foreach ($trunks as $t) { ?>
                                    <option value="<?php echo $t['trunkid'] ?>"><?php echo $t['name']; ?></option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>
                    <div class="layui-clear">
                        <div class="layui-form-mid">1</div>
                        <div class="layui-inline">
                            <select name="trunkid[1]">
                                <option></option>
                                <?php foreach ($trunks as $t) { ?>
                                    <option value="<?php echo $t['trunkid'] ?>"><?php echo $t['name']; ?></option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>
                    <div class="layui-clear">
                        <div class="layui-form-mid">2</div>
                        <div class="layui-inline">
                            <select name="trunkid[2]">
                                <option></option>
                                <?php foreach ($trunks as $t) { ?>
                                    <option value="<?php echo $t['trunkid'] ?>"><?php echo $t['name']; ?></option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submitForm">确认</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<?php
$url = yii\helpers\Url::to(['create']);

$js = <<<JS

    layui.use(['form','element','table', 'layer'],function() {
        var form = layui.form;  
        var element = layui.element;  
        var table = layui.table;  
        var layer = layui.layer;  
        
        window.removeReg = function (obj){
            $(obj).parent("div").remove()
        }
        //添加匹配规则
        $("#addReg").click(function() {
            if ($("#regBox div.layui-clear").length>=5){
                layer.msg('最多5个匹配规则');
                return false
            }
            var _html  = '<div class="layui-clear" style="margin-bottom:5px">'
                _html += '        <div class="layui-form-mid">(</div>'
                _html += '        <div class="layui-input-inline" style="width: 100px">'
                _html += '            <input type="text" placeholder="prepend" class="layui-input">'
                _html += '        </div>'
                _html += '        <div class="layui-form-mid">) +</div>'
                _html += '        <div class="layui-input-inline" style="width: 100px">'
                _html += '            <input type="text" placeholder="prefix" class="layui-input">'
                _html += '        </div>'
                _html += '        <div class="layui-form-mid">| [</div>'
                _html += '        <div class="layui-input-inline" style="width: 100px">'
                _html += '            <input type="text" placeholder="match pattern" class="layui-input">'
                _html += '        </div>'
                _html += '        <div class="layui-form-mid">/</div>'
                _html += '        <div class="layui-input-inline" style="width: 100px">'
                _html += '            <input type="text" placeholder="CallerID" class="layui-input">'
                _html += '        </div>'
                _html += '        <div class="layui-form-mid">]</div>'
                _html += '        <div class="layui-form-mid" onclick="removeReg(this)"><i class="layui-icon layui-icon-delete"></i></div>'
                _html += '</div>'
            $("#regBox").append(_html)
        })
        
        //监听checkbox
        form.on('checkbox(outcid_mode)', function(data){
            if (data.elem.checked) {
                $("input[name='outcid_mode']").val('override_extension')
            }else {
                $("input[name='outcid_mode']").val('')
            }
        }); 
        
        //监听表单提交
        form.on('submit(submitForm)',function(data) {
            var index = layer.load()
            var where = data.field
            var dialpatterns = [];
            $("#regBox div.layui-clear").each(function(index,item) {
                var prepend_digits          = $(item).find("input").eq(0).val()      
                var match_pattern_prefix    = $(item).find("input").eq(1).val()      
                var match_pattern_pass      = $(item).find("input").eq(2).val() 
                var match_cid               = $(item).find("input").eq(3).val() 
                //至少有一个有值才添加
                if (prepend_digits || match_pattern_prefix || match_pattern_pass || match_cid) {
                    dialpatterns.push({
                        "prepend_digits"        : prepend_digits,
                        "match_pattern_prefix"  : match_pattern_prefix,
                        "match_pattern_pass"    : match_pattern_pass,
                        "match_cid"             : match_cid,
                    })
                }
            })
            where['dialpatterns'] = dialpatterns;
            $.post("{$url}",where,function(res) {
                layer.close(index)
                layer.msg(res.msg,{},function() {
                    if (res.code==0){
                        location.reload();
                    }   
                })   
            })
            return false
        })
        
    });
JS;
$this->registerJs($js);
